<template>
	<view class="invitation" >
		<view>创建车友团</view>
		<view v-if="invitationAll&&invitationAll.driver_avatar.length>0">
			<image
			    :src="invitationAll.driver_avatar[0]?invitationAll.driver_avatar[0].avatar:'../../static/team/peo.png'" 
				mode=""
				@click="invitation(invitationAll.id)"
			></image>
			<image 
				:src="invitationAll.driver_avatar[1]?invitationAll.driver_avatar[1].avatar:'../../static/team/peo.png'" 
				mode="" 
				@click="invitation(invitationAll.id)"
			></image>
			<image 
			    :src="invitationAll.driver_avatar[2]?invitationAll.driver_avatar[2].avatar:'../../static/team/peo.png'" 
				mode=""
				@click="invitation(invitationAll.id)"
			></image>
		</view>
		<view>邀请{{3-invitationAll.driver_count}}人,即可成功创建车友团。</view>
		<view @click="invitation(invitationAll.id)">邀请好友</view>
	</view>
</template>

<script setup lang="ts">
const props = defineProps({
  invitationAll: Object,
});
function invitation(id){
	uni.navigateTo({
	  url: '/pages/team/invitation?id='+id+'&type='+'team',
	});
}
</script>

<style scoped lang="less">
	.invitation{
		width: 680rpx;
		height: 426rpx;
		background-color: white;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		view:nth-of-type(1){
			font-size: 34rpx;
			font-weight: 500;
			color: #333333;
		}
		view:nth-of-type(2){
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}
		}
		view:nth-of-type(3){
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
		view:nth-of-type(4){
			width: 366rpx;
			height: 80rpx;
			background: #1B91FF;
			border-radius: 5px;
			text-align: center;
			line-height: 80rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>